<template>
  <!-- 新增/修改 -->
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      size="small"
    >
      <!-- 站点id -->
      <el-form-item label="所属站点" prop="siteId">
        <el-select
          style="width: 100%"
          v-model="form.siteId"
          placeholder="请选择所属站点"
          filterable
        >
          <el-option
            v-for="(item, index) in siteList"
            :key="index"
            :label="item.siteName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 设备名称 -->
      <el-form-item label="设备名称" prop="stationName">
        <el-input v-model="form.stationName" placeholder="请输入设备名称" />
      </el-form-item>
      <!-- 设备类型 -->
      <el-form-item label="设备类型" prop="deviceType">
        <el-select
          style="width: 100%"
          v-model="form.deviceType"
          placeholder="请选择设备类型"
        >
          <el-option label="NP-FCC310-G" value="NP-FCC310-G"></el-option>
          <el-option label="NP-FCC310-GS" value="NP-FCC310-GS"></el-option>
        </el-select>
      </el-form-item>
      <!-- 设备序列号 -->
      <el-form-item label="设备序列号" prop="deviceSerialNum">
        <el-input
          v-model="form.deviceSerialNum"
          placeholder="请输入设备序列号"
        />
      </el-form-item>
      <!-- 备注 -->
      <el-form-item label="备注">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <ChargeStrategy
        v-if="visible && isEdit"
        ref="chargeStrategy"
        :chargeForm="chargeForm"
      ></ChargeStrategy>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import ChargeStrategy from "@/components/ChargeStrategy";
import { addOrUpdateAPI } from "@/api/charge/station";
export default {
  components: { ChargeStrategy },
  props: {
    data: {
      type: Object,
      require: true,
    },
    siteList: {
      type: Array,
      require: true,
    },
    title: {
      type: String,
      require: true,
    },
    visible: {
      type: Boolean,
      require: true,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      region: [],

      // 表单校验
      rules: {
        siteId: [{ required: true, message: "请输入站点id", trigger: "blur" }],
        stationName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        deviceType: [
          { required: true, message: "请选择设备类型", trigger: "change" },
        ],
        deviceSerialNum: [
          { required: true, message: "请输入序列号", trigger: "blur" },
        ],
      },
      chargeForm: {},
    };
  },
  watch: {
    visible(val) {
      // 数据回填
      if (val) {
        this.form = {
          ...this.data,
        };
        if (this.data.chargeStrategy) {
          this.chargeForm = JSON.parse(this.data.chargeStrategy);
        }
      }
    },
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = this.getFormParams();
          addOrUpdateAPI(params).then((res) => {
            if (this.form.id) {
              this.$modal.msgSuccess("修改成功");
            } else {
              this.$modal.msgSuccess("新增成功");
            }
            this.$refs["form"].resetFields();
            this.$emit("success");
          });
        }
      });
    },
    // 关闭
    cancel() {
      this.$refs["form"].resetFields();
      this.$emit("cancel");
    },
    // 获取 新增/修改 表单参数
    getFormParams() {
      let chargeStrategy = {};
      if (this.isEdit) {
        chargeStrategy = JSON.stringify(
          this.$refs.chargeStrategy.getChargeFormValues()
        );
      }
      // 新增时chargeStrategy从所属站点中取
      else {
        chargeStrategy = this.siteList.find(
          (site) => site.id === this.form.siteId
        ).chargeStrategy;
      }
      let params = {
        id: this.form.id || "",
        siteId: this.form.siteId || "",
        stationName: this.form.stationName || "",
        deviceType: this.form.deviceType || "",
        deviceSerialNum: this.form.deviceSerialNum || "",
        expireTime: this.form.expireTime || "",
        chargeStrategy: this.form.chargeStrategy || "",
        remarks: this.form.remarks || "",
        chargeStrategy,
      };

      return params;
    },
  },
};
</script>
<style scoped></style>
